<template>
  <div class="settings-page">
    <el-card class="center-card">
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="auto"
          @validate="onValidate"
      >
        <el-form-item label="">
          <el-text class="welcome-title" size="large">注册观弈零代码平台</el-text>
        </el-form-item>
        <el-form-item label="验证码" prop="verificationCode">
          <el-input
              v-model="form.verificationCode"
              style="width: 70%"
          ></el-input>
          <el-button
              type="primary"
              @click="sendVerificationCode"
              style="margin-left: 10px"
          >发送验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="submitForm"
          >下一步</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElForm, ElFormItem, ElInput, ElButton, ElText, ElCard, ElMessage, ElCheckbox } from 'element-plus';
import { registerInfoKey } from "@/config/app.keys";
import {sendSmsVerifyCode,smsVerifyCode} from "@/api/login"
interface Form {
  verificationCode: string;
}

const form = ref<Form>({
  verificationCode: ''
});

const formRef = ref<InstanceType<typeof ElForm>>();
const router = useRouter();
const registerInfo = ref(JSON.parse(localStorage.getItem(registerInfoKey)))
const rules = {
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
    { pattern: /^\d{4}$/, message: '验证码应为4位数字', trigger: ['blur', 'change'] }
  ]
};

const submitForm = () => {
  if (!formRef.value) {
    console.error('Form reference is undefined.');
    return;
  }
  formRef.value.validate((valid) => {
    if (valid ) {
      //验证码验证
      if(form.value.verificationCode.length!=4){
        ElMessage.error('请填写4位验证码');
        return
      }else{
        smsVerifyCode(registerInfo.value.userInfo.phone,form.value.verificationCode).then(res=>{
          console.log(res)
          if(res.data==true){
            router.push('/settingpasword');
          }else{
            ElMessage.error('验证码错误');
          }
        })
      }

    } else {
      ElMessage.error('请填写验证码');
    }
  });
};

const onValidate = (valid: boolean) => {
  // 更新按钮的状态以禁用未完成的表单
  // 注意：submitButton 应该是一个有效的引用或者变量
   submitButton.plain = !valid;
};



const sendVerificationCode = () => {

  // 这里可以调用后端接口发送验证码

  //使用registerInfo.userInfo.phone发短信
  sendSmsVerifyCode(registerInfo.value.userInfo.phone).then(res=>{
    console.log(res)
    if(res.data==true){
      ElMessage.success('验证码已发送，请查收短信');
    }
  })

};

onMounted(() => {
  // 初始化表单值，例如填充默认值或从存储中恢复状态
});
</script>

<style scoped>
.settings-page {
  margin: auto;
  display: flex;
  justify-content: center;
  height: 80vh;
}
.el-form .el-form-item__content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.welcome-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: #1f2329;
}
.center-card {
  width: 500px;
}
</style>
